<template>
  <div class="content">
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="设备预警日志列表" name="first">
        <el-table
          stripe
          style="width: 100%"
          :data="equipmentWarnLogList"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }" class="el-table-box"
        >
          <el-table-column prop="monitorPointName" label="测点名称">
          </el-table-column>
          <el-table-column prop="description" label="预警原因">
          </el-table-column>
          <el-table-column prop="warnType" label="预警类型">
            <template slot-scope="scope">
               <el-button
            v-if="scope.row.warnType == 0 || scope.row.warnType == 1"
            type="success"
            size="mini"
            >正常</el-button
          >
          <el-button
            v-if="scope.row.warnType == 2 && scope.row.warnLevel == 1"
            type="danger"
            size="mini"
            >一级预警</el-button
          >
          <el-button
            v-if="scope.row.warnType == 2 && scope.row.warnLevel == 2"
            type="warning"
            size="mini"
            >二级预警</el-button
          >
          <el-button
            v-if="scope.row.warnType == 2 && scope.row.warnLevel == 3"
            size="mini"
            style="background: #f0de1b; color: #fff; border: 0"
            >三级预警</el-button
          >
          <el-button v-if="scope.row.warnType == 3">设备预警</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="warnTime" label="预警时间"> </el-table-column>
        </el-table>
         <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[10, 15]"
          :page-size="query.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="设备预警处理日志列表" name="second">
        <el-table
          stripe
          style="width: 100%"
          :data="equipmentWarnDealLogList"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }" class="el-table-box" 
        >
          <el-table-column prop="monitorPointName" label="测点名称">
          </el-table-column>
   <el-table-column prop="dealType" label="处理方式">
            <template slot-scope="scope">
              <span v-if="scope.row.dealType == 0">恢复正常</span>
              <span v-if="scope.row.dealType == 1">一小时内不预警</span>
              <span v-if="scope.row.dealType == 2">十二小时内不预警</span>
              <span v-if="scope.row.dealType == 3">一天内不预警</span>
              <span v-if="scope.row.dealType == 4">三天内不预警</span>
              <span v-if="scope.row.dealType == 5">一周内不预警</span>
            </template>
          </el-table-column>
          <el-table-column prop="dealUser" label="处理人"> </el-table-column>
          <el-table-column prop="warnTime" label="预警时间"> </el-table-column>
          <el-table-column prop="remark" label="处理备注"> </el-table-column>
          <el-table-column prop="dealTime" label="处理时间"> </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChanges"
          @current-change="handleCurrentChanges"
          :current-page="query.page"
          :page-sizes="[10, 15]"
          :page-size="query.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totals"
        >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
    <el-row type="flex" justify="end">
      <el-col :span="10">
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
import {getEquipmentWarnLogByPage,getEquipmentWarnDealLogByPage,getTailingPondList,} from "../../../api/warning-management-api";
export default {
  name: "DryBeachLength",
  data () {
    return {
      dialog_flag: false,
      disposeForm: {
        dealType: null,
        note: '',
        monitorPondId: null
      },
      activeName: 'first',
      query: {
        page: 1,
        pagesize: 10
      },
      querys: {
        page: 1,
        pagesize: 10
      },
      total: null,
      totals: null,
      taipondId: null,
      equipmentWarnLogList: [],
      rules: {
        dealType: [{ required: true, message: '请选择处理方式', trigger: 'change' }],
      },
      equipmentWarnDealLogList: []
    }
  },
  mounted() {
    this.getTailingList();
    this.getEquipmentWarnLogByPage();
    this.getEquipmentWarnDealLogByPage();
  },
  methods: {
    // 获取尾矿库id
    async getTailingList() {
      const res = await getTailingPondList({
        unitId: sessionStorage.getItem("unitId"),
      });
      if (res.resultCode == "200") {
        this.tailingList = res.parameter;
        window.sessionStorage.setItem("tailingPondId", this.tailingList[0].id); //默认选中
      }
    },
    //分页获取
    async getEquipmentWarnLogByPage() {
      const res = await getEquipmentWarnLogByPage({
        monitorTypeId: 1,
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
        tailingPondId: sessionStorage.getItem("tailingPondId"),
      });
      if (res.resultCode == "200") {
        this.equipmentWarnLogList = res.parameter.list;
        this.total = res.parameter.total;
      } else {
        this.equipmentWarnLogList = [];
      }
    },
    handleSizeChange(val) {
      this.query.pagesize = val;
      this.getEquipmentWarnLogByPage();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getEquipmentWarnLogByPage();
    },
    async getEquipmentWarnDealLogByPage() {
      const res = await getEquipmentWarnDealLogByPage({
        monitorTypeId: 1,
        pageCount: this.querys.page,
        pageSize: this.querys.pagesize,
        tailingPondId: sessionStorage.getItem("tailingPondId"),
      });
      if (res.resultCode == "200") {
        this.equipmentWarnDealLogList = res.parameter.list;
        this.totals = res.parameter.total;
      } else {
        this.equipmentWarnDealLogList = [];
      }
    },
    handleSizeChanges(val) {
      this.querys.pagesize = val;
      this.getEquipmentWarnDealLogByPage();
    },
    handleCurrentChanges(val) {
      this.querys.page = val;
      this.getEquipmentWarnDealLogByPage();
    },
    async handleClick(tab, event) {
      if (tab.name == "second") {
        this.getEquipmentWarnDealLogByPage();
      }
    },
  },
}
</script>

<style scoped>
.el-button {
  width: 80px;
}
.content {
  background: #fff;
}
.el-tabs {
  /* background: #fff; */
  height: 87vh;
}
.el-pagination {
  float: right;
  margin-right: 30px;
  margin-top: 30px;
}
.el-table-box {
  display: block;
  height: 72vh;
  overflow-y: auto;
}
.el-table::before {
  z-index: inherit;
}
</style>
